<!DOCTYPE html>
<html lang=zh>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  <meta name="google-site-verification" content="EsvUwzVMQTFU8fJLM8qzjSX2Lzh4msii_Tj8W4EjcSk" />
  
  
  <title>一篇文章快速上手JavaScript | Legrandk&#39;s Qzone</title>
  <meta name="description" content="观此文，你仍需有C语言、HTML、CSS基础之基础。 本文规范基本上基于ECMAScript2015（就是ES6）。 你需要认识C语言的分支与循环处理、HTML的常见标签以及CSS的基础选择器。如果你对C语言的函数指针或者函数式编程常用的lambda表达式有所理解的话，将有助你快速上手JavaScript。 （事件那边你要是懂一点WPF的event原理就更好了……不过没人学C#吧……  如何输出">
<meta property="og:type" content="article">
<meta property="og:title" content="一篇文章快速上手JavaScript">
<meta property="og:url" content="https://www.legr4ndk.top/2021/03/07/JavaScriptCrashCourse/index.html">
<meta property="og:site_name" content="Legrandk&#39;s Qzone">
<meta property="og:description" content="观此文，你仍需有C语言、HTML、CSS基础之基础。 本文规范基本上基于ECMAScript2015（就是ES6）。 你需要认识C语言的分支与循环处理、HTML的常见标签以及CSS的基础选择器。如果你对C语言的函数指针或者函数式编程常用的lambda表达式有所理解的话，将有助你快速上手JavaScript。 （事件那边你要是懂一点WPF的event原理就更好了……不过没人学C#吧……  如何输出">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-03-07T14:53:45.000Z">
<meta property="article:modified_time" content="2021-03-14T10:17:28.603Z">
<meta property="article:author" content="Legrandk">
<meta property="article:tag" content="javascript">
<meta name="twitter:card" content="summary">
  <!-- Canonical links -->
  <link rel="canonical" href="https://www.legr4ndk.top/2021/03/07/JavaScriptCrashCourse/index.html">
  
    <link rel="alternate" href="/atom.xml" title="Legrandk&#39;s Qzone" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/css/style.css">

  
  
  
    <link href="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.3.5/dist/jquery.fancybox.min.css" rel="stylesheet">
  
  
<meta name="generator" content="Hexo 5.2.0">
<style>.github-emoji { position: relative; display: inline-block; width: 1.2em; min-height: 1.2em; overflow: hidden; vertical-align: top; color: transparent; }  .github-emoji > span { position: relative; z-index: 10; }  .github-emoji img, .github-emoji .fancybox { margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; text-decoration: none !important; user-select: none !important; cursor: auto !important; }  .github-emoji img { height: 1.2em !important; width: 1.2em !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; user-select: none !important; cursor: auto !important; } .github-emoji-fallback { color: inherit; } .github-emoji-fallback img { opacity: 0 !important; }</style>
</head>


<body class="main-center theme-black" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="https://github.com/legr4ndk" target="_blank">
          <img class="img-circle img-rotate" src="/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">Legrandk</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">A Game Idiot</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> Hangzhou, China</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="搜索" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav menu-highlight">
        
        
        <li class="menu-item menu-item-home">
          <a href="/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">首页</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">归档</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/categories">
            
            <i class="icon icon-folder"></i>
            
            <span class="menu-title">分类</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">标签</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-links">
          <a href="/links">
            
            <i class="icon icon-friendship"></i>
            
            <span class="menu-title">友链</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-about">
          <a href="/about">
            
            <i class="icon icon-cup-fill"></i>
            
            <span class="menu-title">关于</span>
          </a>
        </li>
        
      </ul>
      
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/legr4ndk" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="https://weibo.com/7526194755/profile" target="_blank" title="Weibo" data-toggle=tooltip data-placement=top><i class="icon icon-weibo"></i></a></li>
        
        <li><a href="https://twitter.com/legr4ndk" target="_blank" title="Twitter" data-toggle=tooltip data-placement=top><i class="icon icon-twitter"></i></a></li>
        
        <li><a href="https://legr4ndk.github.io/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">一言</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p id="hitokoto">获取中...</p><script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
            </div>
        </div>
    </div>
</div>

    
      
  <div class="widget">
    <h3 class="widget-title">分类</h3>
    <div class="widget-body">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/%E4%B8%AA%E4%BA%BA%E6%84%9F%E6%82%9F/">个人感悟</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%90%8E%E7%AB%AF/">后端</a><span class="category-list-count">8</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%AD%A6%E4%B9%A0/">学习</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%AE%89%E5%85%A8/">安全</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%AE%A2%E6%88%B7%E7%AB%AF/">客户端</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%80%8D/">耍</a><span class="category-list-count">2</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">标签云</h3>
    <div class="widget-body tagcloud">
      <a href="/tags/algorithm/" style="font-size: 13.33px;">algorithm</a> <a href="/tags/bootstrap/" style="font-size: 13px;">bootstrap</a> <a href="/tags/cpp/" style="font-size: 13px;">cpp</a> <a href="/tags/csharp/" style="font-size: 13px;">csharp</a> <a href="/tags/ctf/" style="font-size: 13px;">ctf</a> <a href="/tags/git/" style="font-size: 13px;">git</a> <a href="/tags/hexo/" style="font-size: 13px;">hexo</a> <a href="/tags/java/" style="font-size: 13.67px;">java</a> <a href="/tags/javascript/" style="font-size: 13px;">javascript</a> <a href="/tags/markdown/" style="font-size: 13px;">markdown</a> <a href="/tags/misc/" style="font-size: 14px;">misc</a> <a href="/tags/net/" style="font-size: 13px;">net</a> <a href="/tags/os/" style="font-size: 13px;">os</a> <a href="/tags/server/" style="font-size: 13.33px;">server</a> <a href="/tags/sql/" style="font-size: 13px;">sql</a> <a href="/tags/study/" style="font-size: 13.33px;">study</a>
    </div>
  </div>

    
      
  <div class="widget">
    <h3 class="widget-title">归档</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/10/">十月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/09/">九月 2021</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/07/">七月 2021</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/05/">五月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/03/">三月 2021</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/02/">二月 2021</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/01/">一月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/12/">十二月 2020</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/11/">十一月 2020</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/10/">十月 2020</a><span class="archive-list-count">7</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled no-thumbnail">
        
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/%E4%B8%AA%E4%BA%BA%E6%84%9F%E6%82%9F/">个人感悟</a>
              </p>
              <p class="item-title">
                <a href="/2021/10/05/memorySteve/" class="title">纪念史蒂夫·乔布斯逝世10周年</a>
              </p>
              <p class="item-date">
                <time datetime="2021-10-05T04:37:27.000Z" itemprop="datePublished">2021-10-05</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/%E5%AD%A6%E4%B9%A0/">学习</a>
              </p>
              <p class="item-title">
                <a href="/2021/09/29/os-interrupt/" class="title">操作系统笔记1-中断</a>
              </p>
              <p class="item-date">
                <time datetime="2021-09-29T10:12:35.000Z" itemprop="datePublished">2021-09-29</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/%E5%AD%A6%E4%B9%A0/">学习</a>
              </p>
              <p class="item-title">
                <a href="/2021/09/28/net-intro/" class="title">计算机网络笔记-1</a>
              </p>
              <p class="item-date">
                <time datetime="2021-09-28T11:51:37.000Z" itemprop="datePublished">2021-09-28</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/%E4%B8%AA%E4%BA%BA%E6%84%9F%E6%82%9F/">个人感悟</a>
              </p>
              <p class="item-title">
                <a href="/2021/07/30/20thAnniversaryRecord/" class="title">奔三异闻录</a>
              </p>
              <p class="item-date">
                <time datetime="2021-07-29T16:19:37.000Z" itemprop="datePublished">2021-07-30</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/%E5%AD%A6%E4%B9%A0/">学习</a>
              </p>
              <p class="item-title">
                <a href="/2021/07/04/ComputerArch/" class="title">计算机组成原理实验报告</a>
              </p>
              <p class="item-date">
                <time datetime="2021-07-04T03:58:07.000Z" itemprop="datePublished">2021-07-04</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<main class="main" role="main">
  <div class="content">
  <article id="post-JavaScriptCrashCourse" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      一篇文章快速上手JavaScript
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/2021/03/07/JavaScriptCrashCourse/" class="article-date">
	  <time datetime="2021-03-07T14:53:45.000Z" itemprop="datePublished">2021-03-07</time>
	</a>
</span>
        
  <span class="article-category">
    <i class="icon icon-folder"></i>
    <a class="article-category-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
  </span>

        
  <span class="article-tag">
    <i class="icon icon-tags"></i>
	<a class="article-tag-link-link" href="/tags/javascript/" rel="tag">javascript</a>
  </span>


        
	<span class="article-read hidden-xs">
	    <i class="icon icon-eye-fill" aria-hidden="true"></i>
	    <span id="busuanzi_container_page_pv">
			<span id="busuanzi_value_page_pv">0</span>
		</span>
	</span>


        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/2021/03/07/JavaScriptCrashCourse/#comments" class="article-comment-link">评论</a></span>
        
	
		<span class="post-wordcount hidden-xs" itemprop="wordCount">字数统计: 3.4k(字)</span>
	
	
		<span class="post-readcount hidden-xs" itemprop="timeRequired">阅读时长: 13(分)</span>
	

      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <blockquote>
<p>观此文，你仍需有C语言、HTML、CSS基础之基础。</p>
<p>本文规范基本上基于ECMAScript2015（就是ES6）。</p>
<p>你需要认识C语言的分支与循环处理、HTML的常见标签以及CSS的基础选择器。如果你对C语言的函数指针或者函数式编程常用的lambda表达式有所理解的话，将有助你快速上手JavaScript。</p>
<p>（事件那边你要是懂一点WPF的event原理就更好了……不过没人学C#吧……</p>
</blockquote>
<h1 id="如何输出"><a href="#如何输出" class="headerlink" title="如何输出"></a>如何输出</h1><figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(); <span class="hljs-comment">//输出信息</span><br><span class="hljs-built_in">console</span>.warn(); <span class="hljs-comment">//输出警告，是黄色的</span><br><span class="hljs-built_in">console</span>.error(); <span class="hljs-comment">//输出报错，是红色的（虽然也不会导致程序中止</span><br></code></pre></td></tr></tbody></table></figure>

<p>它们可以通过传入多个参数来实现一次性输出更多数据。</p>
<h1 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h1><p><strong>通过let声明/定义变量，通过const声明常量。（不再推荐使用var）</strong></p>
<p>例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> name = <span class="hljs-string">'Alfred'</span>; <span class="hljs-comment">//name是常量，必须直接初始化，之后不可变</span><br><span class="hljs-keyword">let</span> age = <span class="hljs-number">19</span>; <span class="hljs-comment">//age是变量，仍可变</span><br></code></pre></td></tr></tbody></table></figure>

<p>你可与使用typeof运算符来输出一个量的数据类型，例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span> age); <span class="hljs-comment">//向控制台输出age的类型（输出number）</span><br></code></pre></td></tr></tbody></table></figure>

<h2 id="string"><a href="#string" class="headerlink" title="string"></a>string</h2><p>用单引号或者双引号包围的字符串。</p>
<p>例子中我们有：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> s = <span class="hljs-string">'Hello World'</span>;<br></code></pre></td></tr></tbody></table></figure>

<h3 id="连接"><a href="#连接" class="headerlink" title="连接"></a>连接</h3><p>使用加号可以连接字符串。</p>
<p>可以使用模板字符串来往字符串里面填入数据（使用反引号）。</p>
<p>例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> info1 = <span class="hljs-string">'My name is '</span> + name + <span class="hljs-string">', and I am '</span> + age + <span class="hljs-string">' years old.'</span>; <span class="hljs-comment">//使用加法连接</span><br><span class="hljs-keyword">let</span> info2 = <span class="hljs-string">`My name is <span class="hljs-subst">${name}</span>, and I am <span class="hljs-subst">${age}</span> years old.`</span>; <span class="hljs-comment">//使用模板字符串</span><br><span class="hljs-comment">//info1 和 info2 两个字符串的内容一致</span><br></code></pre></td></tr></tbody></table></figure>

<h3 id="获取长度"><a href="#获取长度" class="headerlink" title="获取长度"></a>获取长度</h3><p>使用字符串的<code>length</code>属性获取字符串长度。</p>
<p>例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(s.length); <span class="hljs-comment">//向控制台输出字符串s的长度（输出11）</span><br></code></pre></td></tr></tbody></table></figure>

<h3 id="转变字符"><a href="#转变字符" class="headerlink" title="转变字符"></a>转变字符</h3><p>使用字符串的<code>toUpperCase()</code>方法把字符串里的字母都转成大写，使用<code>toLowerCase()</code>方法把字符串里的字母都转成小写。注意，返回值才是所求的字符串，原字符串并不会改变。</p>
<p>例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(s.toUpperCase()); <span class="hljs-comment">//向控制台输出全为大写字母的字符串s（输出为HELLO WORLD）</span><br><span class="hljs-built_in">console</span>.log(s.toLowerCase()); <span class="hljs-comment">//向控制台输出全为小写字母的字符串s（输出为hello world）</span><br></code></pre></td></tr></tbody></table></figure>

<h3 id="获取子字符串"><a href="#获取子字符串" class="headerlink" title="获取子字符串"></a>获取子字符串</h3><p>使用字符串的<code>substring()</code>方法获取字符串的子串。该方法有两个参数，第一个参数代表子串从原字符串的第几个开始（下标从0开始），第二个参数代表子串在父串的第几个字符前结束。注意，第一个参数所指的字符会被包含在子串中而第二个参数所指的不会。</p>
<p>例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(s.substring(<span class="hljs-number">2</span>,<span class="hljs-number">5</span>));<br>    <span class="hljs-comment">//向控制台输出s的自下标为2的字符开始，自下标为5的字符结束的子串（输出为llo）</span><br></code></pre></td></tr></tbody></table></figure>

<h3 id="将字符串分割到数组中"><a href="#将字符串分割到数组中" class="headerlink" title="将字符串分割到数组中"></a>将字符串分割到数组中</h3><p>使用字符串的<code>split()</code>方法将字符串分割到数组中。该方法有一个参数，为分割的分隔符，此方法将按此分隔符分割该字符串到数组。如果要分割每个字符，请使用参数<code>''</code>（空字符串）。注意，参数将不出现在分割完的字符串中。</p>
<p>例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(s.split(<span class="hljs-string">''</span>));<br>    <span class="hljs-comment">//输出["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]</span><br><span class="hljs-built_in">console</span>.log(s.split(<span class="hljs-string">' '</span>));<br>    <span class="hljs-comment">//输出["Hello", "World"]</span><br><span class="hljs-built_in">console</span>.log(s.split(<span class="hljs-string">'ell'</span>));<br>    <span class="hljs-comment">//输出["H", "o World"]</span><br></code></pre></td></tr></tbody></table></figure>

<h2 id="object"><a href="#object" class="headerlink" title="object"></a>object</h2><h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><p>一个数组内可以有多个数据，这些数据可以是不同类型的。</p>
<p>数组下标从0开始，逐项递增。</p>
<p>即使数组被定义为const，但仍可改变数组，只是不能给该量赋值其他数组。</p>
<h4 id="创建数组"><a href="#创建数组" class="headerlink" title="创建数组"></a>创建数组</h4><p>有多种方法创建数组：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> array1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>); <span class="hljs-comment">//使用构造函数创建，括号内可以传入一些值以初始化数组（也可以不传）</span><br><span class="hljs-keyword">const</span> array2 = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-string">'233'</span>]; <span class="hljs-comment">//直接创建</span><br></code></pre></td></tr></tbody></table></figure>

<h4 id="访问数组元素"><a href="#访问数组元素" class="headerlink" title="访问数组元素"></a>访问数组元素</h4><p>直接使用<code>[]</code>即可。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(array1[<span class="hljs-number">0</span>]); <span class="hljs-comment">//向控制台输出array1数组的第一项（下标为0）（输出1）</span><br></code></pre></td></tr></tbody></table></figure>

<h4 id="给数组添加元素"><a href="#给数组添加元素" class="headerlink" title="给数组添加元素"></a>给数组添加元素</h4><p>虽然array1只有两个元素，但是要想给它加元素，直接<code>array1[2] = 3</code>即可。注意，如果添加的位置比较不和原来的贴在一起，中间会用empty填充。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript">array1[<span class="hljs-number">2</span>] = <span class="hljs-number">3</span>;<br><span class="hljs-built_in">console</span>.log(array1); <span class="hljs-comment">//输出[1, 2, 3]，长度为3</span><br>array1[<span class="hljs-number">6</span>] = <span class="hljs-number">7</span>;<br><span class="hljs-built_in">console</span>.log(array1); <span class="hljs-comment">//输出[1, 2, 3, empty × 3, 7]，长度为7（empty也算长度）</span><br><br><span class="hljs-comment">//特殊情况：</span><br><span class="hljs-keyword">const</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>];<br>arr[<span class="hljs-number">-2</span>] = <span class="hljs-number">5</span>;<br><span class="hljs-built_in">console</span>.log(arr); <span class="hljs-comment">//输出 [1, 2, -2: 5]，长度为2</span><br><span class="hljs-comment">//要访问下标为-2的元素，可以使用arr[-2]或者arr['-2']</span><br></code></pre></td></tr></tbody></table></figure>

<p>向末尾追加，可以使用数组的<code>push()</code>方法，例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript">array2.push(<span class="hljs-number">666</span>);<br><span class="hljs-built_in">console</span>.log(array2); <span class="hljs-comment">//输出[1, 2, '233', 666]</span><br></code></pre></td></tr></tbody></table></figure>

<p>向开头添加，可以使用数组的<code>unshift()</code>方法，例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript">array2.unshift(<span class="hljs-number">9</span>);<br><span class="hljs-built_in">console</span>.log(array2); <span class="hljs-comment">//输出[9, 1, 2, '233', 666]</span><br></code></pre></td></tr></tbody></table></figure>

<h4 id="去除数组中的元素"><a href="#去除数组中的元素" class="headerlink" title="去除数组中的元素"></a>去除数组中的元素</h4><p>使用数组的<code>pop()</code>方法，可以去除数组的最后一个元素，同时，此方法会返回被去除的元素。（类似于其他语音的<code>pushBack()</code>方法。）例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> x = array2.pop();<br><span class="hljs-built_in">console</span>.log(array2); <span class="hljs-comment">//输出[9, 1, 2, '233']</span><br><span class="hljs-built_in">console</span>.log(x); <span class="hljs-comment">//输出666</span><br></code></pre></td></tr></tbody></table></figure>

<h4 id="检查某个量是不是数组"><a href="#检查某个量是不是数组" class="headerlink" title="检查某个量是不是数组"></a>检查某个量是不是数组</h4><p>使用<code>Array.isArray()</code>方法可以检查一个量是不是数组，如果传入的参数是数组，它会返回true；否则，它会返回false。</p>
<h4 id="获取数组中某个值的下标"><a href="#获取数组中某个值的下标" class="headerlink" title="获取数组中某个值的下标"></a>获取数组中某个值的下标</h4><p>使用数组的<code>indexOf()</code>方法可以获取数组中该元素（由参数传入）的下标。如果参数内容不存在于数组中，该函数会返回<code>-1</code>。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(array2.indexOf(<span class="hljs-number">2</span>)); <span class="hljs-comment">//输出2</span><br><span class="hljs-built_in">console</span>.log(array2.indexOf(<span class="hljs-number">999</span>)); <span class="hljs-comment">//输出-1</span><br></code></pre></td></tr></tbody></table></figure>

<h4 id="遍历数组"><a href="#遍历数组" class="headerlink" title="遍历数组"></a>遍历数组</h4><p>可以通过<code>for...of</code>循环遍历数组的值，例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> x <span class="hljs-keyword">of</span> array2) {<br>    <span class="hljs-built_in">console</span>.log(x);<br>}<br><span class="hljs-comment">//控制台会依次输出9, 1, 2, 233</span><br></code></pre></td></tr></tbody></table></figure>

<p>或者使用数组的<code>forEach()</code>方法进行遍历。该方法需要传入一个参数作为回调函数，该回调函数有一个参数，即为每次遍历时代表的数组的内容，每次遍历执行一次回调函数。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript">array2.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">x</span>) </span>{ <span class="hljs-built_in">console</span>.log(x); }); <span class="hljs-comment">//参数为回调匿名函数</span><br>array2.forEach(<span class="hljs-function"><span class="hljs-params">x</span> =&gt;</span> <span class="hljs-built_in">console</span>.log(x) ); <span class="hljs-comment">//使用λ表达式的匿名函数</span><br><span class="hljs-comment">//控制台会依次输出9, 1, 2, 233</span><br></code></pre></td></tr></tbody></table></figure>

<h4 id="取出数组中对象的特定属性值并生成新数组"><a href="#取出数组中对象的特定属性值并生成新数组" class="headerlink" title="取出数组中对象的特定属性值并生成新数组"></a>取出数组中对象的特定属性值并生成新数组</h4><p>可以通过数组的<code>map()</code>方法实现。该方法需要传入一个参数作为回调函数，该回调函数有一个参数，即为每次遍历时代表的数组的内容，每次遍历执行一次回调函数，该回调函数需要返回特定的属性值。此方法的返回值为所求的数组。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//获取数组中所有对象的id</span><br><span class="hljs-keyword">const</span> x = [<br>    {<br>        id: <span class="hljs-number">1</span>,<br>        name: <span class="hljs-string">'Alfred'</span><br>    },<br>    {<br>        id: <span class="hljs-number">2</span>,<br>        name: <span class="hljs-string">'John'</span><br>    }<br>]<br><span class="hljs-keyword">const</span> ids = x.map(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">i</span>) </span>{ <span class="hljs-keyword">return</span> i.id; });<br><span class="hljs-keyword">const</span> ids = x.map(<span class="hljs-function"><span class="hljs-params">i</span> =&gt;</span> i.id); <span class="hljs-comment">//λ表达式版</span><br><span class="hljs-built_in">console</span>.log(ids);<br><span class="hljs-comment">//控制台会输出[1, 2]</span><br></code></pre></td></tr></tbody></table></figure>

<h4 id="筛选数组中满足特定属性值要求的对象并生成新对象数组"><a href="#筛选数组中满足特定属性值要求的对象并生成新对象数组" class="headerlink" title="筛选数组中满足特定属性值要求的对象并生成新对象数组"></a>筛选数组中满足特定属性值要求的对象并生成新对象数组</h4><p>可以通过数组的<code>filter()</code>方法实现。该方法需要传入一个参数作为回调函数，该回调函数有一个参数，即为每次遍历时代表的数组的内容，每次遍历执行一次回调函数，该回调函数需要返回一个布尔值，为真的情况下此对象会被加入新数组。此方法的返回值为所求的数组。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//筛选所有id=2的对象</span><br><span class="hljs-keyword">const</span> x = [<br>    {<br>        id: <span class="hljs-number">1</span>,<br>        name: <span class="hljs-string">'Alfred'</span><br>    },<br>    {<br>        id: <span class="hljs-number">2</span>,<br>        name: <span class="hljs-string">'John'</span><br>    }<br>]<br><span class="hljs-keyword">const</span> id2 = x.filter(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">i</span>) </span>{ <span class="hljs-keyword">return</span> i.id === <span class="hljs-number">2</span>; });<br><span class="hljs-keyword">const</span> id2 = x.filter(<span class="hljs-function"><span class="hljs-params">i</span> =&gt;</span> i.id === <span class="hljs-number">2</span>); <span class="hljs-comment">//λ表达式版</span><br><span class="hljs-built_in">console</span>.log(id2);<br><span class="hljs-comment">//控制台会输出[{id: 2, name: "John"}]</span><br></code></pre></td></tr></tbody></table></figure>

<h3 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h3><p>对象实际上就是大括号包围的键值对。（<code>{key: value}</code>)</p>
<p>即使对象被定义为const，但仍可改变对象的内容，只是不能给该量赋值其他对象。</p>
<p>例子中，有：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> person = {<br>    name: <span class="hljs-string">'Alfred'</span>,<br>    age: <span class="hljs-number">19</span>,<br>    address: {<br>        province: <span class="hljs-string">'Zhejiang'</span>,<br>        city: <span class="hljs-string">'Hangzhou'</span><br>    }<br>};<br></code></pre></td></tr></tbody></table></figure>

<h4 id="访问对象的单个值"><a href="#访问对象的单个值" class="headerlink" title="访问对象的单个值"></a>访问对象的单个值</h4><p>使用<code>.</code>运算符来方位对象的单个值。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(person.age); <span class="hljs-comment">//输出19</span><br></code></pre></td></tr></tbody></table></figure>

<h4 id="解构对象"><a href="#解构对象" class="headerlink" title="解构对象"></a>解构对象</h4><p>可以通过解构对象的方式从对象中取出一定数量的值。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> { name, age, <span class="hljs-attr">address</span>: {city} } = person; <span class="hljs-comment">//现在有3个const量分别为name、age和city</span><br></code></pre></td></tr></tbody></table></figure>

<h4 id="添加属性"><a href="#添加属性" class="headerlink" title="添加属性"></a>添加属性</h4><p>可以直接为对象添加新的键值对，例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript">person.email = <span class="hljs-string">'person@me.com'</span>;<br><span class="hljs-comment">//那么person现在是</span><br><span class="hljs-comment">/*</span><br><span class="hljs-comment">{ </span><br><span class="hljs-comment">	name: 'Alfred', </span><br><span class="hljs-comment">	age: 19, </span><br><span class="hljs-comment">	address: {</span><br><span class="hljs-comment">		province: 'Zhejiang', </span><br><span class="hljs-comment">		city: 'Hangzhou' },</span><br><span class="hljs-comment">	email: 'person@me.com'</span><br><span class="hljs-comment">}</span><br><span class="hljs-comment">*/</span><br></code></pre></td></tr></tbody></table></figure>

<h4 id="遍历对象的属性"><a href="#遍历对象的属性" class="headerlink" title="遍历对象的属性"></a>遍历对象的属性</h4><p>可以通过<code>for...in</code>循环遍历对象的属性，例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">for</span> (x <span class="hljs-keyword">in</span> person) {<br>    <span class="hljs-built_in">console</span>.log(x);<br>}<br><span class="hljs-comment">//遍历属性的名字（键），控制台会依次输出name, age, address, email</span><br><span class="hljs-keyword">for</span> (x <span class="hljs-keyword">in</span> person){<br>    <span class="hljs-built_in">console</span>.log(person[x]);<br>}<br><span class="hljs-comment">//遍历属性的值，控制台会依次输出Alfred, 19, {province: "Zhejiang", city: "Hangzhou"}, person@me.com</span><br></code></pre></td></tr></tbody></table></figure>

<h3 id="JSON"><a href="#JSON" class="headerlink" title="JSON"></a>JSON</h3><p>JSON是一种数据格式，长得很像JavaScript的对象，经常用于传输数据。</p>
<p>使用<code>JSON.stringify()</code>函数可以把JavaScript的object类型数据转换为JSON字符串。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> a = <span class="hljs-built_in">JSON</span>.stringify(person);<br><span class="hljs-built_in">console</span>.log(a);<br><span class="hljs-comment">/*输出</span><br><span class="hljs-comment">{	"name":"Alfred",</span><br><span class="hljs-comment">    "age":19,</span><br><span class="hljs-comment">    "address":{"province":"Zhejiang","city":"Hangzhou"},</span><br><span class="hljs-comment">    "email":"person@me.com"</span><br><span class="hljs-comment">}</span><br><span class="hljs-comment">*/</span><br></code></pre></td></tr></tbody></table></figure>

<h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><p>如果你给一个变量赋值为<code>null</code>，那么你用<code>typeof</code>运算符查看这个量的类型的时候，会发现它是<code>object</code>类型。</p>
<p>只定义了而未初始化的变量，它的默认值是<code>undefined</code>。</p>
<p>其他待补充。</p>
<h1 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h1><h2 id="如何选择元素"><a href="#如何选择元素" class="headerlink" title="如何选择元素"></a>如何选择元素</h2><p>使用<code>document.querySelector()</code>和<code>document.querySelectorAll()</code>来选择HTML上的标签。</p>
<p>前者用来选择单个元素，后者可以选择多个元素并将其组入一个<code>NodeList</code>，它类似于数组，可以进行数组的一些操作（比如<code>forEach()</code>遍历和<code>NodeList.children[]</code>来选择第几个元素）。这两个函数的参数是一个字符串，字符串是选择器，形式同CSS的标签选择器、class选择器（加<code>.</code>）和id选择器（加<code>#</code>），例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> elem1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#id'</span>); <span class="hljs-comment">//如果实际可选的元素不止一个，则选择第一个</span><br><span class="hljs-keyword">const</span> elem2 = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">'.item'</span>); <span class="hljs-comment">//选中了所有.item标记的元素</span><br></code></pre></td></tr></tbody></table></figure>

<h2 id="删除页面元素"><a href="#删除页面元素" class="headerlink" title="删除页面元素"></a>删除页面元素</h2><p>可以使用<code>页面元素.remove()</code>方法完成。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript">elem1.remove(); <span class="hljs-comment">//移除页面上的以#id标记的元素</span><br>elem2.remove(); <span class="hljs-comment">//移除页面上的所有的.item标记的元素</span><br>elem2.lastElementChild.remove(); <span class="hljs-comment">//移除elem2组合中的最后一个元素</span><br></code></pre></td></tr></tbody></table></figure>

<h2 id="添加页面元素"><a href="#添加页面元素" class="headerlink" title="添加页面元素"></a>添加页面元素</h2><p>可以通过<code>document.createElement()</code>方法来创建一个元素。此方法的参数为你要创建的元素的标签名，它的返回值为新创建好的元素DOM对象。要往元素内添加元素，可以使用元素的<code>appendChild()</code>方法，参数为你要插入的元素。特殊地，若要插入文字，参数可以设置为<code>document.createTextNode()</code>，此方法的参数为元素内的字符串。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//在一个ul内插入一个li，li的内容为2333</span><br><span class="hljs-keyword">const</span> ul = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'ul'</span>) <span class="hljs-comment">//选中ul</span><br><span class="hljs-keyword">const</span> li = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'li'</span>); <span class="hljs-comment">//创建li</span><br>li.appendChild(<span class="hljs-built_in">document</span>.createTextNode(<span class="hljs-string">'2333'</span>)); <span class="hljs-comment">//li内插入字符</span><br>ul.appendChild(li); <span class="hljs-comment">//把li加入ul</span><br></code></pre></td></tr></tbody></table></figure>

<h2 id="获取与编辑页面元素的内容试试"><a href="#获取与编辑页面元素的内容试试" class="headerlink" title="获取与编辑页面元素的内容试试"></a>获取与编辑页面元素的内容试试</h2><p>使用元素对象的<code>textContent</code>、<code>innerText</code>、<code>innerHTML</code>属性可以方便的获取或者更改元素的内容。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript">elem2.firstElementChild.textContent = <span class="hljs-string">'Hello'</span>; <span class="hljs-comment">//修改elem2集合中的第一个元素的标签中的文本内容</span><br>elem2.firstElementChild.innerText = <span class="hljs-string">'Hello'</span>; <span class="hljs-comment">//效果同上</span><br>elem1.innerHTML = <span class="hljs-string">'&lt;a href="xxx"&gt;233&lt;/a&gt;'</span>; <span class="hljs-comment">//修改elem1的内嵌html代码</span><br><br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'h1'</span>).textContent); <span class="hljs-comment">//输出的是文本</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'h1'</span>).innerText); <span class="hljs-comment">//同上</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'h1'</span>).innerHTML); <span class="hljs-comment">//输出的是该元素的内嵌的所有HTML代码与文本</span><br></code></pre></td></tr></tbody></table></figure>

<p>输入框里面的内容，可以通过元素对象的<code>value</code>属性来获取。</p>
<h2 id="获取与编辑页面元素的HTML属性与CSS样式"><a href="#获取与编辑页面元素的HTML属性与CSS样式" class="headerlink" title="获取与编辑页面元素的HTML属性与CSS样式"></a>获取与编辑页面元素的HTML属性与CSS样式</h2><p>直接使用元素对象的相应属性并赋值即可。</p>
<p>给HTML元素添加新类使用元素的<code>classList.add()</code>方法实现，该函数接受一个字符串参数，即为要添加的class名；另外有一个方法叫<code>classList.remove()</code>，可以去除元素的某个class。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript">elem1.style.background = <span class="hljs-string">'red'</span>; <span class="hljs-comment">//把elem1元素的背景改成红色的（CSS）</span><br>elem1.href = <span class="hljs-string">'https://www.baidu.com'</span>; <span class="hljs-comment">//把elem的href属性设为百度（之前没设置的会新指定）</span><br><span class="hljs-built_in">console</span>.log(elem1.target); <span class="hljs-comment">//输出elem1元素的target属性的内容</span><br><br>elem1.classList.add(<span class="hljs-string">'container'</span>); <span class="hljs-comment">//给elem1的class属性添加一个 container 类（可用于CSS选择）</span><br></code></pre></td></tr></tbody></table></figure>

<h1 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h1><p>以一个按钮元素为例。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript">btn = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.btn'</span>);<br></code></pre></td></tr></tbody></table></figure>

<h2 id="为一个元素添加监听事件"><a href="#为一个元素添加监听事件" class="headerlink" title="为一个元素添加监听事件"></a>为一个元素添加监听事件</h2><p>使用元素的<code>addEventListener()</code>方法可以为特定的元素添加监听事件。该函数有两个参数，第一个参数是一个字符串，代表要监听的事件；第二个参数为在目标元素上监听到该事件时所触发的回调函数。关于这个回调函数，它接受一个参数，这个参数是被监听方法自动传入的事件对象，函数体即该事件触发时执行的行为。该事件对象的<code>target</code>属性即为触发本事件的元素本身。例如，我给这个按钮添加单击按下时的监听事件：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><code class="hljs javascript">btn.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> {<br>    e.preventDefault(); <span class="hljs-comment">//阻止该行为的默认事件，比如提交表单、跳转网页等</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'clicked!'</span>);<br>});<br></code></pre></td></tr></tbody></table></figure>

<p>常用事件有：</p>
<ul>
<li>click：单击</li>
<li>mouseover：鼠标移入、悬浮在上</li>
<li>mouseout：鼠标移出</li>
<li>submit：表单提交</li>
</ul>
<p>以及其他的比如输入事件等等。</p>
<p><strong>事件可以用于检查表单格式（我懒得举例子了，建议自己实现一下，获取DOM对象然后在函数体内确认）。</strong></p>
<h1 id="Ending"><a href="#Ending" class="headerlink" title="Ending"></a>Ending</h1><blockquote>
<p>看到这里就把整个文章看完了，但是你以为你这就可以愉快的写js了吗？</p>
<p>并不！</p>
<p>你要是还想了解更多的JavaScript语言方面的东西，推荐你几本书：《ES6标准入门（第三版）》、《JavaScript高级程序设计（第四版）》和《JavaScript DOM编程艺术》。</p>
<p>Good luck, and good night!</p>
</blockquote>

      
    </div>
    <div class="article-footer">
      <blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a href="https://www.legr4ndk.top/2021/03/07/JavaScriptCrashCourse/" title="一篇文章快速上手JavaScript" target="_blank" rel="external">https://www.legr4ndk.top/2021/03/07/JavaScriptCrashCourse/</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="external">CC BY-NC-SA 4.0协议</a> 与 <a href="https://github.com/996icu/996.ICU/blob/master/LICENSE" target="_blank" rel="external">"Anti 996" License</a> 两者合并的<a href="http://www.legr4ndk.top/LICENSE.html" target="_blank" rel="external">许可协议</a>。转载请注明出处。
    </li>
  </ul>
</blockquote>


<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://github.com/legr4ndk" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="/images/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://github.com/legr4ndk" target="_blank"><span class="text-dark">Legrandk</span><small class="ml-1x">A Game Idiot</small></a></h3>
        <div>「愛を懐いて、理想を叫んだ。」</div>
      </div>
    </figure>
  </div>
</div>


    </div>
  </article>
  
    
  <section id="comments">
  	
  </section>


  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    <li class="prev">
      <a href="/2021/03/08/NginxCrashCourse/" title="一篇文章快速上手Nginx服务器"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;上一篇</span></a>
    </li>
    
    
    <li class="next">
      <a href="/2021/02/12/S3Solve/" title="鼠年的年终总结"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
  </ul>
  
  
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-fancy btn-donate pop-onhover bg-gradient-warning" data-toggle="modal" data-target="#donateModal"><span>￥</span></button>
  <!-- <div class="wave-icon wave-icon-danger btn-donate" data-toggle="modal" data-target="#donateModal">
    <div class="wave-circle"><span class="icon"><i class="icon icon-bill"></i></span></div>
  </div> -->
  
  
  <div class="bar-right">
    
    <div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter" data-mobile-sites="weibo,qq,qzone,wechat"></div>
    
  </div>
  </div>
</nav>
  
<!-- Modal -->
<div class="modal modal-center modal-small modal-xs-full fade" id="donateModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content donate">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="modal-body">
        <div class="donate-box">
          <div class="donate-head">
            <p>感谢您对我的支持，我会继续努力的!！</p>
          </div>
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade active in" id="alipay">
              <div class="donate-payimg">
                <img src="/images/donate/alipayimg.png" alt="打钱！" title="打钱！" />
              </div>
              <p class="text-muted mv">请我喝杯奶茶~</p>
              <p class="text-grey">打开支付宝扫一扫，即可进行扫码打赏哦</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="wechatpay">
              <div class="donate-payimg">
                <img src="/images/donate/wechatpayimg.png" alt="打钱！" title="打钱！" />
              </div>
              <p class="text-muted mv">请我喝杯奶茶~</p>
              <p class="text-grey">打开微信扫一扫，即可进行扫码打赏哦</p>
            </div>
          </div>
          <div class="donate-footer">
            <ul class="nav nav-tabs nav-justified" role="tablist">
              <li role="presentation" class="active">
                <a href="#alipay" id="alipay-tab" role="tab" data-toggle="tab" aria-controls="alipay" aria-expanded="true"><i class="icon icon-alipay"></i> 支付宝</a>
              </li>
              <li role="presentation" class="">
                <a href="#wechatpay" role="tab" id="wechatpay-tab" data-toggle="tab" aria-controls="wechatpay" aria-expanded="false"><i class="icon icon-wepay"></i> 微信支付</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
    <div class="today" style="position:fixed;bottom:0;right:0;z-index:2">
        <div class="design"
            style="float:left;width:auto;border:1px solid #000;border-radius:20px 20px 20px 20px;height:auto;font-size:100%;padding: 8px 7px 18px 5px;background-color:#000;height:auto;box-shadow:-10px 10px red;transform:scale(0.67,0.67) translate3D(12px,-12px,0) rotate3D(1.3,0.5,-1.1,45deg)">
            <div class="week character"
                style="position:absolute;right:60px;top:20px;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(95deg) scale(1.5,1.5);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                <div
                    style="transform:rotate(-70deg) scale(2,2);color: #fff;font:bold 3px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                    <b><big><big id="weekno">一</big></big></b>
                </div>
            </div>
            <div class="&quot;full" style="position:relative;margin:5px 25px 10px 20px;width:100%">
                <div class="date" style="position:relative">
                    <div
                        style="position:relative;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(15deg) scale(1.5,2);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(2,2);color:#fff;font:bold 3px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big id="monno">5</big></big></b>
                        </div>
                    </div>
                    <div style="clear:both;"></div>
                    <div
                        style="position:relative;top:-5px;left:10px;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(40deg) scale(1.5,3);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(2,3.5);color:#fff;font:bold 8px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big>/</big></big></b>
                        </div>
                    </div>
                    <div
                        style="position:relative;top:18px;left:25px;width:auto;float:left;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(-10deg) scale(2.5,2.5);margin:5px 5px 5px 5px;text-align:center;">
                        <div
                            style="transform:scale(2.5,2.5);color:#fff;font:bold 9px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big id="dayno">31</big></big></b>
                        </div>
                    </div>
                </div>
                <div class="state" style="position:relative;left:60px;top:26px;margin:0 25px 60px 15px">
                    <div
                        style="position:relative;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px; transform:rotate(10deg) scale(1.5,1.5);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div style="transform:scale(2,2);text-align:bottom">
                            <style type="text/css">
                                @-moz-keyframes loading {

                                    0%,
                                    100% {
                                        -moz-transform: scale(1) rotateZ(0deg);
                                        transform: scale(1) rotateZ(0deg);
                                        opacity: 1;
                                    }

                                    26% {
                                        -moz-transform: scale(1.1) rotateZ(12deg);
                                        transform: scale(1.1) rotateZ(12deg);
                                        opacity: .2;
                                    }

                                    76% {
                                        -moz-transform: scale(0.8) rotateZ(-8deg);
                                        transform: scale(0.8) rotateZ(-8deg);
                                        opacity: .6;
                                    }
                                }

                                @-webkit-keyframes loading {

                                    0%,
                                    100% {
                                        -webkit-transform: scale(1) rotateZ(0deg);
                                        transform: scale(1) rotateZ(0deg);
                                        opacity: 1;
                                    }

                                    26% {
                                        -webkit-transform: scale(1.1) rotateZ(12deg);
                                        transform: scale(1.1) rotateZ(12deg);
                                        opacity: .2;
                                    }

                                    76% {
                                        -webkit-transform: scale(0.8) rotateZ(-8deg);
                                        transform: scale(0.8) rotateZ(-8deg);
                                        opacity: .6;
                                    }
                                }

                                @keyframes loading {

                                    0%,
                                    100% {
                                        -moz-transform: scale(1) rotateZ(0deg);
                                        -ms-transform: scale(1) rotateZ(0deg);
                                        -webkit-transform: scale(1) rotateZ(0deg);
                                        transform: scale(1) rotateZ(0deg);
                                        opacity: 1;
                                    }

                                    26% {
                                        -moz-transform: scale(1.1) rotateZ(12deg);
                                        -ms-transform: scale(1.1) rotateZ(12deg);
                                        -webkit-transform: scale(1.1) rotateZ(12deg);
                                        transform: scale(1.1) rotateZ(12deg);
                                        opacity: .2;
                                    }

                                    76% {
                                        -moz-transform: scale(0.8) rotateZ(-8deg);
                                        -ms-transform: scale(0.8) rotateZ(-8deg);
                                        -webkit-transform: scale(0.8) rotateZ(-8deg);
                                        transform: scale(0.8) rotateZ(-8deg);
                                        opacity: .6;
                                    }
                                }

                                .loader {
                                    overflow: hidden;
                                    font-size: 45px;
                                }

                                .loader span {
                                    -moz-animation: loading 1s linear infinite -0.8s;
                                    -webkit-animation: loading 1s linear infinite -0.8s;
                                    animation: loading 1s linear infinite -0.8s;
                                    display: inline-block;
                                }

                                .loader .span2 {
                                    -moz-animation: loading 1s linear infinite -0.2s;
                                    -webkit-animation: loading 1s linear infinite -0.2s;
                                    animation: loading 1s linear infinite -0.2s;
                                }

                                .loader .span3 {
                                    -moz-animation: loading 1s linear infinite -0.5s;
                                    -webkit-animation: loading 1s linear infinite -0.5s;
                                    animation: loading 1s linear infinite -0.5s;
                                }

                                .loader .span4 {
                                    -moz-animation: loading 1s linear infinite -1.1s;
                                    -webkit-animation: loading 1s linear infinite -1.1s;
                                    animation: loading 1s linear infinite -1.1s;
                                }

                                .loader .span5 {
                                    -moz-animation: loading 1s linear infinite -0.36s;
                                    -webkit-animation: loading 1s linear infinite -0.36s;
                                    animation: loading 1s linear infinite -0.36s;
                                }

                                .loader .span6 {
                                    -moz-animation: loading 1s linear infinite -0.65s;
                                    -webkit-animation: loading 1s linear infinite -0.65s;
                                    animation: loading 1s linear infinite -0.65s;
                                }

                                .loader .span7 {
                                    -moz-animation: loading 1s linear infinite -0.93s;
                                    -webkit-animation: loading 1s linear infinite -0.93s;
                                    animation: loading 1s linear infinite -0.93s;
                                }
                            </style>
                            <div class="loader" style="color:#fff;font-size:3px;overflow:visible;"><span
                                    class="span{{#time：N}};"><b id="word1">夜</b></span></div>
                        </div>
                    </div>
                    <div
                        style="position:relative;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px; transform:rotate(-15deg) scale(1.5,1.5);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div style="transform:scale(2,2);text-align:bottom">
                            <div class="loader" style="color:#fff;font-size:3px;overflow:visible;"><span
                                    class="span{{#time：N}};"><b id="word2">晚</b></span></div>
                        </div>
                    </div>
                </div>
                <div style="clear:both;"></div>
                <div class="Monday" style="position:relative;top:30px;margin:0 0 10px 15px">
                    <div
                        style="position:relative;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(15deg) scale(1.5,2);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(1.8,1.8);color:#fff;font:bold 2px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big>P</big></big></b>
                        </div>
                    </div>
                    <div
                        style="position:relative;left:-5px;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(-10deg) scale(1,1.5);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(1.8,1.8);color:#fff;font:bold 5px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big>a</big></big></b>
                        </div>
                    </div>
                    <div
                        style="position:relative;left:-15px;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(15deg) scale(1,1.5);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(1.8,1.8);color:#fff;font:bold 3px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big>Y</big></big></b>
                        </div>
                    </div>
                    <div
                        style="position:relative;left:-20px;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(15deg) scale(1.5,2);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(1.8,1.8);color:#fff;font:bold 4px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big>D</big></big></b>
                        </div>
                    </div>
                    <div
                        style="position:relative;left:-25px;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(-20deg) scale(1,1.5);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(1.8,1.8);color:#fff;font:bold 4px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big>a</big></big></b>
                        </div>
                    </div>
                    <div
                        style="position:relative;left:-30px;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(-15deg) scale(1.5,2);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(1.8,1.8);color:#fff;font:bold 4px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big>Y</big></big></b>
                        </div>
                    </div>
                </div>
            </div><br><br><br>
        </div>
    </div>
    <script type="text/javascript">
        let time = new Date();
        let week = document.querySelector('#weekno');
        let month = document.querySelector('#monno');
        let day = document.querySelector('#dayno');
        let w1 = document.querySelector('#word1');
        let w2 = document.querySelector('#word2');

        month.innerText = time.getMonth() + 1;
        day.innerText = time.getDate();
        
        d = time.getDay();
        switch (d) {
            case 0:
                week.textContent = '日';
                break;
            case 1:
                week.textContent = '月';
                break;
            case 2:
                week.textContent = '火';
                break;
            case 3:
                week.textContent = '水';
                break;
            case 4:
                week.textContent = '木';
                break;
            case 5:
                week.textContent = '金';
                break;
            case 6:
                week.textContent = '土';
                break;
        }

        let h = time.getHours();
        if (h < 8) {
            w1.textContent = '朝';
            w2.textContent = '';
        } else if (h < 12) {
            w1.textContent = '午';
            w2.textContent = '前';
        } else if (h < 13) {
            w1.textContent = '午';
            w2.textContent = '間';
        }
        else if (h < 17) {
            w1.textContent = '午';
            w2.textContent = '後';
        }
        else if (h < 19) {
            w1.textContent = '夕';
            w2.textContent = '方';
        }
        else {
            w1.textContent = '夜';
            w2.textContent = '';
        }

        if ((d == 0 || d == 6) && (h > 7 && h < 17)) {
            w1.textContent = '昼';
            w2.textContent = '間';
        }
    </script>
    
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/legr4ndk" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="https://weibo.com/7526194755/profile" target="_blank" title="Weibo" data-toggle=tooltip data-placement=top><i class="icon icon-weibo"></i></a></li>
        
        <li><a href="https://twitter.com/legr4ndk" target="_blank" title="Twitter" data-toggle=tooltip data-placement=top><i class="icon icon-twitter"></i></a></li>
        
        <li><a href="https://legr4ndk.github.io/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>


        <div class="copyright">
            <div class="support">
                <a target="_blank" rel="noopener" href="https://creativecommons.org"><img src="http://www.legr4ndk.top/img/cc.png"
                        alt="CreativeCommons" /></a>
                <a target="_blank" rel="noopener" href="https://996.icu"><img src="http://www.legr4ndk.top/img/link-996.icu-red.svg"
                        alt="996.icu" /></a>
                <br />
            </div>

            
                &copy; 2019-2022 By <a href="http://www.legr4ndk.top">
                        Legrandk
                    </a>
                    

                        <div class="publishby">
                            Theme based on <a href="https://github.com/cofess/hexo-theme-pure"
                                    target="_blank">pure</a>.
                        </div>
                        <div class="ICP">
                            <a href="http://beian.miit.gov.cn/" rel="external nofollow noopener noreferrer"
                                target="_blank">浙ICP备20009661号-2</a>
                        </div>
        </div>
</footer>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/js/plugin.min.js"></script>


<script src="/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/js/insight.js"></script>






   
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





   


  <script src="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.3.5/dist/jquery.fancybox.min.js"></script>
  <script>
  //利用 FancyBox 实现点击图片放大
  $(document).ready(function() {
    $('article img').not('[hidden]').not('.panel-body img').each(function() {
      var $image = $(this);
      var imageCaption = $image.attr('alt');
      var $imageWrapLink = $image.parent('a');
      if ($imageWrapLink.length < 1) {
        var src = this.getAttribute('src');
        var idx = src.lastIndexOf('?');
        if (idx != -1) {
          src = src.substring(0, idx);
        }
        $imageWrapLink = $image.wrap('<a href="' + src + '"></a>').parent('a');
      }
      $imageWrapLink.attr('data-fancybox', 'images');
      if (imageCaption) {
        $imageWrapLink.attr('data-caption', imageCaption);
      }
    });
    $().fancybox({
      selector: '[data-fancybox="images"]',
      hash: false,
      loop: false,
    });
  });
  </script>





</body>
</html>